<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 80%; margin-left: 50px">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="目录" prop="directoryId">
            <el-cascader v-model="temp.directoryId" :options="treeList" :props="treeProps" :show-all-levels="false" label="name" change-on-select clearable style="width: 100%" @change="choseMu" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="信息项名称" prop="name">
            <el-input v-model="temp.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="英文名称" prop="engName">
            <el-input v-model="temp.engName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据类型" prop="dataType">
            <el-select v-model="temp.dataType" class="filter-item" placeholder="请选择数据类型">
              <el-option v-for="item in dictList('model_data_type')" :key="'type' + item.label" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="长度" prop="dataSize">
            <el-input v-model="temp.dataSize" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否键值" prop="isPerimary">
            <el-radio-group v-model="temp.isPerimary">
              <el-radio v-for="item in dictList('sf')" :key="'type' + item.label" :label="item.value * 1">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否启用" prop="status">
            <el-radio-group v-model="temp.status">
              <el-radio v-for="item in dictList('is_use')" :key="'type' + item.label" :label="item.value * 1" :value="item.value * 1">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否允许有空值" prop="isNull">
            <el-radio-group v-model="temp.isNull">
              <el-radio v-for="item in dictList('sf')" :key="'type' + item.label" :label="item.value * 1">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="英文简称" prop="shortName">
            <el-input v-model="temp.shortName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="同义词" prop="synonym">
            <el-input v-model="temp.synonym" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="信息项描述" prop="description">
            <el-input v-model="temp.description" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="信息项用法" prop="useMethod">
            <el-input v-model="temp.useMethod" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">
        {{ $t('table.cancel') }}
      </el-button>
      <el-button type="primary" :loading="loading" @click="dialogStatus === 'create' ? createData() : updateData()">
        {{ $t('table.confirm') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { createModelSpecification, updateModelSpecification, getModelSpecification } from '@/api/standardsystem/modelSpecification'

export default {
  name: 'ModelSpecificationForm',
  data() {
    return {
      rules: {
        directoryId: [{ required: true, message: '目录id为必填项', trigger: 'blur' }],
        name: [{ required: true, message: '信息项名称为必填项', trigger: 'blur' }],
        engName: [{ required: true, message: '英文名称为必填项', trigger: 'blur' }],
        dataType: [{ required: true, message: '数据类型为必填项', trigger: 'blur' }],
        dataSize: [
          { required: true, message: '长度为必填项', trigger: 'blur' },
          {
            pattern: /(^[0-9]+([.,][0-9]+)?%?$)/,
            message: '只能输入整数或者小数',
          },
        ],
        isNull: [{ required: true, message: '是否允许有空值为必填项', trigger: 'blur' }],
        isPerimary: [{ required: true, message: '是否键值为必填项', trigger: 'blur' }],
        status: [{ required: true, message: '是否启用为必填项', trigger: 'blur' }],
      },
      temp: {
        ancestralId: '2',
      },
      treeList: [],
      treeProps: {
        value: 'id',
        label: 'name',
        expandTrigger: 'hover',
      },
      textMap: {
        update: '编辑',
        create: '新建',
      },
      loading: false,
      dialogFormVisible: false,
      dialogStatus: '',
    }
  },
  methods: {
    choseMu(e) {
      this.temp.directoryId = e[e.length - 1]
      console.log(this.temp.directoryId)
    },
    setList(treeList) {
      this.treeList = treeList
    },
    getList() {
      this.$emit('refreshList')
    },
    resetTemp() {
      this.loading = false
      this.temp = {
        id: undefined,
        directoryId: undefined,
        name: undefined,
        engName: undefined,
        shortName: undefined,
        dataType: undefined,
        dataSize: undefined,
        synonym: undefined,
        status: undefined,
        isPerimary: undefined,
        isNull: undefined,
        description: undefined,
        useMethod: undefined,
        delFlag: undefined,
        createTime: undefined,
        updateTime: undefined,
        ancestralId: '2',
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      if (this.temp.directory_id !== undefined && this.temp.directory_id !== '' && this.temp.directory_id instanceof Array) {
        this.temp.directory_id = this.temp.directory_id[this.temp.directory_id.length - 1]
      }

      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          createModelSpecification(this.temp).then((response) => {
            this.loading = false
            if (response.data.code == 0) {
              this.getList()
              this.dialogFormVisible = false
              this.$message.success(response.data.msg)
            } else {
              this.$message.error(response.data.msg)
            }
          })
        }
      })
    },
    handleUpdate(id) {
      this.resetTemp()
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      getModelSpecification(id).then((response) => {
        if (response.data.code == 200) {
          this.temp = response.data.data
        } else {
          this.dialogFormVisible = false
          this.$message.error(response.data.msg)
        }
      })
    },
    updateData() {
      console.log(this.temp.status)
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.temp.directory_id !== undefined && this.temp.directory_id !== '' && this.temp.directory_id instanceof Array) {
            this.temp.directory_id = this.temp.directory_id[this.temp.directory_id.length - 1]
          }

          this.loading = true
          this.temp.ancestralId = '2'
          this.temp.forms = []
          updateModelSpecification(this.temp).then((response) => {
            this.loading = false
            if (response.data.code === 0) {
              this.dialogFormVisible = false
              this.getList()
              this.$message.success(response.data.msg)
            } else {
              this.$message.error(response.data.msg)
            }
          })
        }
      })
    },
  },
}
</script>
